<template>
    <div>
     <Nav-Bar>
         <div slot="left" class="leftback" @click="backClick">
             <img src="~assets/images/detail/fanhui.png" alt="返回图片">
         </div>
         <div slot="center" class="title">
             <div class="title-item" v-for="(item, i) in titles" :key="i" 
             :class="{Dtailactive: currentIden === i}" 
             @click="itemClick(i)">{{ item }}</div>
         </div>
      </Nav-Bar>
    </div>
</template>


<script>
import NavBar from 'components/common/navbar/NavBar'
export default {
    name: 'DetailNavBar',
    data() {
        return {
            titles: ['商品', '参数', '评论', '推荐'],
            currentIden: 0,
        }
    },
    components: {
       NavBar,
    },
    methods: {
      itemClick(i) {
           this.currentIden = i
           this.$emit('titleClick', i)
      },
      // 返回主页
      backClick() {
        this.$router.back()
    }
    }
} 
</script>

<style>
 .title{
     display: flex;
 }
 .title .title-item{
    flex: 1;
    font-size: 0.9rem
 }
 .Dtailactive{
     color: #d43c9ccc; 
 }
 .leftback{
     width: 60px;
     height: 44px;
 }
 .leftback img {
    margin-top: 6px;
    width: 2rem;
    height: 2rem;
 }
</style>